extends ./layouts/default

block title
  title Koa-trailer homePager

block content
  style.
    header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background: #00474f;
      color: #E7DACB;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      z-index: 500;
    }

    @media (min-width: 768px) {
      .sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 4rem;
        z-index: 1000;
        height: calc(100vh - 4rem);
        border-right: 1px solid rgba(0,0,0,.1);
        order: 0;
        border-bottom: 1px solid rgba(0,0,0,.1);

      }
      .cat-links {
        display: block!important;
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-right: -15px;
        margin-left: -15px;
      }
    }

    .sidebar-link {
      display: block;
      padding: .25rem 1.5rem;
      font-weight: 500;
      color: rgba(0,0,0,.65);
    }

    .sidebar .nav > li > a {
      display: block;
      padding: .25rem 1.5rem;
      font-size: 90%;
      color: rgba(0,0,0,.65);
    }

    .sidebar-item.active > .sidebar-inner {
      display: block;
    }

    .card {
      margin-bottom: 1.5rem;
    }

    .switcher {
      position: relative;
      padding: 1rem 15px;
      margin-right: -15px;
      margin-left: -15px;
      border-bottom: 1px solid rgba(0,0,0,.05);
    }

    .sidebar-toggle {
      line-height: 1;
      color: #212529;
    }

    .p-0 {
      padding: 0!important;
    }

    .ml-3, .mx-3 {
      margin-left: 1rem!important;
    }
    .btn-link {
      font-weight: 400;
      color: #007bff;
      background-color: transparent;
    }

  include ./includes/header

  .container-fluid
    .row
      .col-12.col-md-3.col-xl-2.sidebar
        .collapse.cat-links
          .sidebar-item.active
            a.sidebar-link(href='/') Links
            ul.nav.sidebar-inner
              li.active.sidebar-inner-active
                a(href='/') Link1
              li.sidebar-inner-active
                a(href='/') Link2
      .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content
        .row
          .col-md-6
            .card
              img.card-img-top(src='https://img3.doubanio.com/img/trailer/medium/2539667252.jpg', data-video='http://183.250.178.149/vlive.qqvideo.tc.qq.com/AMgeLtfdZcATWKFpvp2MlvAFxMnkLyqXFD-WOZZNjqMw/h0200dkmv2o.p201.1.mp4?vkey=651EE14C0E41CD7C31EEB29A609E11DE1F003418BF1D160FA7B961460EEC1AEA2D056262FFC59DAFCB8327DEEAB33C79C07907F65E16E420F481C78323D6E0E3AD304DA3A146CBE5F2E11F6CE9D66DC7669CBC9C81079E9B90ADDB2D85000D308D4359F4BC679D40F033CA5BC529DE9FFF7881240EDF6E1E&platform=70901&sdtfrom=&fmt=shd&level=0&locid=9a58f4f0-e4f2-4dd0-af8e-a5f82443f25f&size=1186655&ocid=2531202476')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
            .card
              img.card-img-top(src='https://img3.doubanio.com/img/trailer/medium/2539667252.jpg', date-video='http://183.250.178.149/vlive.qqvideo.tc.qq.com/AMgeLtfdZcATWKFpvp2MlvAFxMnkLyqXFD-WOZZNjqMw/h0200dkmv2o.p201.1.mp4?vkey=651EE14C0E41CD7C31EEB29A609E11DE1F003418BF1D160FA7B961460EEC1AEA2D056262FFC59DAFCB8327DEEAB33C79C07907F65E16E420F481C78323D6E0E3AD304DA3A146CBE5F2E11F6CE9D66DC7669CBC9C81079E9B90ADDB2D85000D308D4359F4BC679D40F033CA5BC529DE9FFF7881240EDF6E1E&platform=70901&sdtfrom=&fmt=shd&level=0&locid=9a58f4f0-e4f2-4dd0-af8e-a5f82443f25f&size=1186655&ocid=2531202476')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
        .row
          .col-md-6
            .card
              img.card-img-top(src='https://img3.doubanio.com/img/trailer/medium/2539667252.jpg', date-video='http://183.250.178.149/vlive.qqvideo.tc.qq.com/AMgeLtfdZcATWKFpvp2MlvAFxMnkLyqXFD-WOZZNjqMw/h0200dkmv2o.p201.1.mp4?vkey=651EE14C0E41CD7C31EEB29A609E11DE1F003418BF1D160FA7B961460EEC1AEA2D056262FFC59DAFCB8327DEEAB33C79C07907F65E16E420F481C78323D6E0E3AD304DA3A146CBE5F2E11F6CE9D66DC7669CBC9C81079E9B90ADDB2D85000D308D4359F4BC679D40F033CA5BC529DE9FFF7881240EDF6E1E&platform=70901&sdtfrom=&fmt=shd&level=0&locid=9a58f4f0-e4f2-4dd0-af8e-a5f82443f25f&size=1186655&ocid=2531202476')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
            .card
              img.card-img-top(src='https://img3.doubanio.com/img/trailer/medium/2539667252.jpg', date-video='http://183.250.178.149/vlive.qqvideo.tc.qq.com/AMgeLtfdZcATWKFpvp2MlvAFxMnkLyqXFD-WOZZNjqMw/h0200dkmv2o.p201.1.mp4?vkey=651EE14C0E41CD7C31EEB29A609E11DE1F003418BF1D160FA7B961460EEC1AEA2D056262FFC59DAFCB8327DEEAB33C79C07907F65E16E420F481C78323D6E0E3AD304DA3A146CBE5F2E11F6CE9D66DC7669CBC9C81079E9B90ADDB2D85000D308D4359F4BC679D40F033CA5BC529DE9FFF7881240EDF6E1E&platform=70901&sdtfrom=&fmt=shd&level=0&locid=9a58f4f0-e4f2-4dd0-af8e-a5f82443f25f&size=1186655&ocid=2531202476')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
  #myModal.modal.fade.bd-example-modal-lg(tabindex="-1", role="dialog", aria-labelledby="myLargeModalLabel", aria-hidden="true")
    .modal-dialog.modal-lg
      #videoModal.modal-content
  
  include ./includes/script

    script.
      var player = null
      $(document).ready(function () {
        $('#myModal').on('hidden.bs.modal', function (e) {
          if (player && player.pause) player.pause()
        })

        $('.card-img-top').click(function (e) {
          var video = $(this).data('video')
          var image = $(this).attr('src')

          $('#myModal').modal('show')

          if (!player) {
            player = new DPlayer({
              container: document.getElementById('videoModal'),
              screenshot: true,
              video: {
                url: video,
                pic: image,
                thumbnails: image
              }
            })
          } else {
            if (play.video.currentSrc !== video) {
              player.switchVideo({
                url: video,
                pic: image,
                type: 'auto'
              })
            }
          }
        })
      })